<style type="text/css">
    .block_collection_recommend{}
    .block_collection_recommend .block_collection_recommend_content{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        background: #f5f5f5;
    }
    .block_collection_recommend .block_collection_recommend_left{
        width: 50%;
        position: relative;
    }
    .block_collection_recommend .block_collection_recommend_ad{
        display: block;
        height: 100%;
    }
    .block_collection_recommend .block_collection_recommend_image{
        height: 100%;
    }
    .block_collection_recommend .block_collection_recommend_image img{
        max-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .block_collection_recommend .block_collection_recommend_text{
        position: absolute;
        bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .block_collection_recommend .block_collection_recommend_text_wrapper{
        background: rgba(255,255,255,.8);
        padding: 30px 50px;
        border-radius: 5px;
    }
    .block_collection_recommend .block_collection_recommend_title{
        font-size: var(--title_font_size);
        color: var(--title_color);
        font-family: var(--title_font_family);
        font-style: var(--title_font_style);
        font-weight: var(--title_font_weigth);
        letter-spacing: var(--title_letter_spacing);
    }
    .block_collection_recommend .block_collection_recommend_btn{
        display: inline-flex;
    }





    .block_collection_recommend .block_collection_recommend_right{
        width: 50%;
        position: relative;
        padding: 50px 0;
    }
    .block_collection_recommend .block_collection_recommend_right ul{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .block_collection_recommend .block_collection_recommend_right li{
        width: 300px;
    }

    .block_collection_recommend .block_collection_recommend_right .product_pic {
        margin-bottom: 12px;
        position: relative;
    }
    .block_collection_recommend .block_collection_recommend_right .product_pic .product_img {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        width: 100%;
    }

    .block_collection_recommend .block_collection_recommend_right .product_pic img {
        max-width: 100%;
    }

    .block_collection_recommend .block_collection_recommend_right .block_product_name {
        margin-bottom: 5px;
        line-height: 1.5;
    }
    .block_collection_recommend .block_collection_recommend_right .product_price {
        font-weight: bold;
    }

    .block_collection_recommend .block_collection_recommend_right .product_oldprice {
        color: #888;
        text-decoration: line-through;
        margin-left: 5px;
        display: inline-block;
        font-weight: normal;
    }

    .block_collection_recommend .block_collection_recommend_content_left{
        flex-direction: row-reverse;
    }





    .block_collection_recommend .block_collection_recommend_ul{
        margin-top: 40px;
    }
    .block_collection_recommend .block_collection_recommend_ul ul {
        display: grid;
        grid-row-gap: 30px;
        grid-column-gap: 30px;
        grid-template-columns: repeat(4, calc(25% - 22.5px));
    }

    .block_collection_recommend .block_collection_recommend_ul li {
        list-style-type: none;
        line-height: 1.4;
    }

    .block_collection_recommend .block_collection_recommend_ul .product_pic {
        margin-bottom: 12px;
        position: relative;
    }


    .block_collection_recommend .block_collection_recommend_ul .product_pic .product_img {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        width: 100%;
    }

    .block_collection_recommend .block_collection_recommend_ul .product_pic img {
        max-width: 100%;
    }

    .block_collection_recommend .block_collection_recommend_ul .block_product_name {
        margin-bottom: 5px;
        line-height: 1.5;
    }
    .block_collection_recommend .block_collection_recommend_ul .product_price {
        font-weight: bold;
    }

    .block_collection_recommend .block_collection_recommend_ul .product_oldprice {
        color: #888;
        text-decoration: line-through;
        margin-left: 5px;
        display: inline-block;
        font-weight: normal;
    }


    .block_collection_recommend .collection_product_pc_3 ul {
        grid-template-columns: repeat(3, calc(33.3333% - 20px));
    }

    .block_collection_recommend .collection_product_pc_4 ul {
        grid-template-columns: repeat(4, calc(25% - 22.5px));
    }

    .block_collection_recommend .collection_product_pc_5 ul {
        grid-template-columns: repeat(5, calc(20% - 24px));
    }

    .block_collection_recommend .block_collection_recommend_ul_more {
        margin-top: calc(var(--general_layout_spacing) * 0.5);
        text-align: center;
    }

    .block_collection_recommend .block_collection_recommend_ul_more a {
        margin: 0;
    }
    @media (max-width: 768px) {
        .block_collection_recommend .block_collection_recommend_content{
            flex-direction: column;
        }
        .block_collection_recommend .block_collection_recommend_left,
        .block_collection_recommend .block_collection_recommend_right{
            width: 100%;
        }
        .block_collection_recommend .block_collection_recommend_right li{
            width: 250px;
        }
        .block_collection_recommend .block_collection_recommend_ul ul{
            grid-template-columns: repeat(3, calc(33.3333% - 20px));
        }
    }
    @media (max-width: 767px) {
        .block_collection_recommend .block_collection_recommend_ul{
            margin-top: 15px;
        }
        .block_collection_recommend .block_collection_recommend_ul ul {
            grid-row-gap: 20px;
            grid-column-gap: 14px;
            grid-template-columns: repeat(2, calc(50% - 7px));
        }

        .block_collection_recommend .collection_product_wap_1 ul {
            display: block;
        }

        .block_collection_recommend .collection_product_wap_1 ul li {
            margin-bottom:20px;
        }

        .block_collection_recommend .block_collection_recommend_ul_more {
            margin-top: 30px;
        }
        .block_collection_recommend .block_collection_recommend_ul .product_pic{
            margin-bottom: 16px;
        }
        .block_collection_recommend .block_collection_recommend_text_wrapper{
            padding: 20px 35px;
        }
        .block_collection_recommend .block_collection_recommend_title{
            font-size: calc(var(--title_font_size) * var(--wap_title_scale));
        }
        .block_collection_recommend .block_collection_recommend_text_wrapper {
            padding: 20px 35px;
            max-width: 90%;
            box-sizing: border-box;
        }
    }
     

</style>

<div class="block_collection_recommend" id="block_collection_recommend_{{ block.id }}"> 
    {% get_collection collections_id = {section.settings.collection.id} %}
    
    <div class="container_wrapper">
        <div class="block_collection_recommend_content block_collection_recommend_content_{{ section.settings.recommend_layout }}">
            <div class="block_collection_recommend_left">
                <a class="block_collection_recommend_ad" href="/collections/{{ collection.handle }}">
                    <div class="block_collection_recommend_image"><img data-src="{{collection.src}}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ collection.title }}"></div> 
                    {% if section.settings.recommend_title != "" or section.settings.recommend_detail != "" or section.settings.recommend_btn != "" %}
                    <div class="block_collection_recommend_text">
                        <div class="block_collection_recommend_text_wrapper">
                            {% if section.settings.recommend_title != "" %}<div class="block_collection_recommend_title">{{ section.settings.recommend_title }}</div>{% endif %}
                            {% if section.settings.recommend_detail != "" %}<div class="block_collection_recommend_detail">{{ section.settings.recommend_detail }}</div>{% endif %}
                            {% if section.settings.recommend_btn != "" %}<div class="block_collection_recommend_btn main_btn">{{ section.settings.recommend_btn }}</div>{% endif %}
                        </div>
                    </div>
                    {% endif %}
                </a>
            </div>
            <div class="block_collection_recommend_right">
                <ul>
                    {% if section.settings.recommend_good.id %}
                    {% get_product product_id={section.settings.recommend_good.id} %}
                    {% include 'collection_product', collection_handle:product.handle %}
                    {% else %}
                    {% if section.settings.collection.id %}
                    {% get_products collection_id = {section.settings.collection.id} limit = { section.settings.product_number } %}
                    {% for product in products %}

                    {%- if forloop.first == true -%} 
                    {% include 'collection_product', collection_handle:collection.handle %}
                    {%- endif -%}

                    
                    {% endfor %}
                    {% else %}
                    <li>
                        <div class="product_pic">
                            <a href="javascript:;"><img src="{{ 'empty.png' | public_asset_abs_url }}"></a>
                            {% if product.inventory_tracking %}
                            {% if product.inventory_quantity == "0" %}
                                <div class="soldout">{{ lang.general.sold_out }}</div>
                            {% endif %}
                            {% endif %}
                            <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">88% <span>OFF</span></div></div>
                        </div>
                        <div class="block_product_name">
                            <a href="javascript:;">title</a>
                        </div>
                        <div class="product_price general_buying-color">$88.00<span class="product_oldprice general_original-color">$88.00</span></div>
                    </li>
                    {% endif %}
                    {% endif %}


                    
                </ul>
            </div>
        </div>
        <div class="block_collection_recommend_ul collection_product_pc_{{ section.settings.pc_number }} collection_product_wap_{{ section.settings.wap_number }}">
            <ul>
                {% if section.settings.collection.id %}
                {% get_products collection_id = {section.settings.collection.id} limit = { section.settings.product_number } %}
                {% for product in products %}
                {% include 'collection_product', collection_handle:collection.handle %}
                {% endfor %}
                {% else %}
                {% for i in (1..4) %}
                <li>
                    <div class="product_pic">
                        <a href="javascript:;"><img src="{{ 'empty.png' | public_asset_abs_url }}"></a>
                        {% if product.inventory_tracking %}
                        {% if product.inventory_quantity == "0" %}
                            <div class="soldout">{{ lang.general.sold_out }}</div>
                        {% endif %}
                        {% endif %}
                        <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">88% <span>OFF</span></div></div>
                    </div>
                    <div class="block_product_name">
                        <a href="javascript:;">title</a>
                    </div>
                    <div class="product_price general_buying-color">$88.00<span class="product_oldprice general_original-color">$88.00</span></div>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{% schema %}
{
    "tag": "section",
    "class": "block_collection_recommend",
    "is_global": false,
    "name": {
        "zh_CN": "推荐专辑"
    },
    "max_blocks": "20",
    "settings": [
        {
            "type": "card_header",
            "label": {
                "zh_CN": "设置"
            }
        },
        {
            "type": "card_collection",
            "label": {
                "zh_CN": "选择专辑"
            },
            "default": {
                "id": "",
                "title": ""
            },
            "id": "collection"
        },
        {
            "type": "card_product",
            "label": {
                "zh_CN": "选择商品"
            },
            "default": {
                "id": "id",
                "title": ""
            },
            "id": "recommend_good"
        },
        {
            "type": "card_select",
            "label": {
                "zh_CN": "布局"
            },
            "id": "recommend_layout",
            "option": [
                {
                    "label": {
                        "zh_CN": "商品在左"
                    },
                    "value": "left"
                },
                {
                    "label": {
                        "zh_CN": "商品在右"
                    },
                    "value": "right"
                }
            ],
            "default": "right"
        },
        {
            "type": "card_input",
            "label": {
                "zh_CN": "产品总数量"
            },
            "id": "product_number",
            "default": "8"
        },
        {
            "type": "card_slider",
            "label": {
                "zh_CN": "PC每排数量"
            },
            "id": "pc_number",
            "max": "5",
            "min": "3",
            "default": "4"
        },
        {
            "type": "card_slider",
            "label": {
                "zh_CN": "移动端每排数量"
            },
            "id": "wap_number",
            "max": "2",
            "min": "1",
            "default": "2"
        },
        {
            "type": "card_input",
            "id": "recommend_title",
            "label": {
                "zh_CN": "标题"
                },
            "default": "Fashion jewellery"
        },
        {
            "type": "card_text_editor",
            "label": {
                "zh_CN": "简短描述"
            },
            "id": "recommend_detail",
            "default": ""
        },
        {
          "type": "card_input",
          "id": "recommend_btn",
          "label": {
            "zh_CN": "按钮标题"
          },
          "default": "Show now"
        }

    ],
    "blocks": [],
    "default": {
        "settings": {
            "collection": {
                "id": "",
                "handle":"",
                "title": ""
            },
            "recommend_good": "",
            "recommend_layout": "right",
            "product_number": "4",
            "pc_number": "4",
            "wap_number": "2",
            "recommend_title": "Fashion jewellery",
            "recommend_detail": "",
            "recommend_btn": "Shop Now"
        },
        "blocks": []
  }
}
{% endschema %}